<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div id="cont">4</div>
  <div id="cont">5</div>
  <div id="cont">6</div>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="text" name="password">
</body>
<script>

  // 所有的选择器选择到的数量：
    // 单个元素：不用解析，直接操作元素
      // id，query
    // 数组：必须要解析之后，才能操作元素
      // class，tag，name，queryAll

  // 失明特性：就算有多个符合要求的元素，也只选择一个，如果一个都没有，选择到的数据为null
  
  // id选择器：document.getElementById("id名");
  // var cont = document.getElementById("cont");
  // console.log(cont);
  // console.log(typeof cont);
  // cont.style.background = "red";

  // class选择器：document.getElementsByClassName("class名");
  // 就算一个都没有，返回结果也是一个数组（空数组）
  // var box = document.getElementsByClassName("box");
  // console.log(box);
  // console.log(box.style);
  // box[0].style.background = "green";
  // console.log(box[0]);
  // console.log(box[1]);
  // console.log(box[2]);

  // tag选择器：document.getElementsByTagName("tag名")
  // var span = document.getElementsByTagName("span")
  // console.log(span)

  // name选择器：document.getElementsByName("name名")
  // var password = document.getElementsByName("password");
  // console.log(password);



</script>
</html>